<template>
    <div class="block-stores" style="padding-top: 40px">
      <h3>STORES</h3>
      <h4>{{title.phone}}</h4>
      <div>
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          style="width: 100%"
        >
          <div>
            <van-swipe-item
              ><img v-src="title.img" />      
          <div class="Cname">{{ title.Chinese }}</div>
          <div class="Ename">{{ title.English_name }}</div>
              <p>
                {{ title.TEL }}
                <br />
                {{ title.address }}
                <!-- <br /> -->
                <!-- {{ title.phone }} -->
                <br />
                {{ title.time }}
              </p>
            </van-swipe-item>
          </div>
        </van-swipe>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props:{
        title: Object
     },
  };
  </script>
  
  <style scoped>
  .block-stores {
    margin-top: 15px;
    background-color: #e9e6e5;
    height: 190vw;
  }
  
  .block-stores h4 {
    font-family: cursive;
    font-size: 5vw;
    color: #999;
    text-align: center;
    line-height: 1.5;
    margin: 0;
  }
  
  .my-swipe {
    height: 150vw;
    text-align: center;
  }
  
  .my-swipe img {
    width: 95%;
    display: inline;
    height: 90vw;
  }
  
  h3 {
    font-family: Prata, serif;
    font-size: 9vw;
    letter-spacing: 0.35rem;
    color: #444;
    text-align: center;
    padding-bottom: 3px;
    line-height: 1.5;
    padding-top: 25px;
  }
  
  .block-stores p {
    line-height: 2;
    margin-top: 15px;
    color: #444;
    text-align: left;
    margin-left: 50px;
    font-size: 4vw;
  }
  
  .block-stores .Ename {
    text-align: center;
    font-size: 4vw;
    font-family: cursive;
  }
  .block-stores .Cname {
    font-size: 6vw;
    margin-top: 15px;
    text-align: center;
  }
  </style>
  